﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bom工单</title>
    <!-- 引用Layui的CSS -->
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 整体表单容器样式 */
        .order-form-container {
            padding: 10px;
        }

        /* 表单行样式 */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        /* 操作按钮容器样式 */
        .operation-buttons {
            text-align: right;
            margin-bottom: 10px;
        }

        /* 标签样式 */
        label {
            width: 120px; /* 统一标签宽度 */
            text-align: right;
            margin-right: 10px;
            white-space: nowrap; /* 防止字段名换行 */
        }

        /* 输入框样式 */
        input {
            width: 200px; /* 修改输入框宽度为350px */
        }

        /* 文本域样式 */
        textarea {
            width: 350px;
            min-height: 50px; /* 设置文本域最小高度 */
        }

        /* 表格样式 */
        .layui-table {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="demoTabs2"></div>
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['layer', 'form', 'jquery', 'tabs', 'table'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var tabs = layui.tabs;
            var table = layui.table;

            // 方法渲染
            tabs.render({
                elem: '#demoTabs2',
                header: [
                    { title: 'Bom信息' },
                    { title: 'Bom配件' },
                    { title: '工艺流程' },
                    { title: '操作记录' }
                ],
                body: [
                    {
                        content: `
                                                    <div class="order-form-container">
                                                        <!-- 操作按钮 -->
                                                        <div class="operation-buttons">
        @* <button class="layui-btn" id="saveButton">保存</button> *@
                                                        </div>
                                                        <!-- 表单信息 -->
                                                        <div class="form-row">
                                                            <label>BOM编号:</label>
                                                            <input type="text" id="bomCode" disabled placeholder="后端自动生成">
                                                            <label>BOM主题:</label>
                                                            <input type="text" id="bomTheme" placeholder="请输入主题" disabled>
                                                        </div>
                                                        <div class="form-row">
                                                            <label>默认BOM:</label>
                                                            <select id="documentCode" disabled>
                                                                <option value="是">是</option>
                                                                <option value="否">否</option>
                                                            </select>
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            &nbsp;&nbsp;&nbsp;&nbsp &nbsp &nbsp;&nbsp;
                                                            <label>版本:</label>
                                                            <input type="text" id="bomVersion" placeholder="请输入版本" disabled>
                                                        </div>
                                                        <div class="form-row">
                                                            <label>成品类型:</label>
                                                            <select id="productType" disabled>
                                                                <option value="类型一">类型一</option>
                                                                <option value="类型二">类型二</option>
                                                                <option value="类型三">类型三</option>
                                                            </select>
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            &nbsp;&nbsp;
                                                            <label>成品名称:</label>
                                                            <input type="text" id="productName" placeholder="请输入成品名称" disabled>
                                                        </div>
                                                        <div class="form-row">
                                                            <label>日产量:</label>
                                                            <input type="text" id="ProductionNum" placeholder="请输入日产量" disabled>
                                                        </div>
                                                        <div class="form-row">
                                                            <label>备注:</label>
                                                            <textarea id="remark" disabled></textarea> <!-- 将备注改为文本域 -->
                                                        </div>
                                                    </div>
                                                `
                    },
                    {
                        content: `<table id="partsTable" class="layui-table" lay-filter="partsTableFilter"></table>`
                    },
                    {
                        content: `<table id="processTable" class="layui-table" lay-filter="processTableFilter"></table>`
                    },
                    { content: `<table id="operationTable" class="layui-table" lay-filter="operationTableFilter"></table>` }
                ],
                // index: 1, // 初始选中项
                // className: 'layui-tabs-card',
                // closable: true
            });

            // 渲染Bom配件表格
            table.render({
                elem: '#partsTable',
                //url: 'http://localhost:5234/api/WorkOrder/GetBomPart',
                url: "@ViewBag.BaseUrl/T7/WorkOrder/GetBomPart",
                method: 'get',
                cols: [
                    [
                        { type: 'numbers', title: '序号', width: 80 },
                        { field: 'bomCode', title: 'BOM编号', width: 120 },
                        { field: 'partsCode', title: '物料编号', width: 120 },
                        { field: 'partsName', title: '物料名称', width: 120 },
                        { field: 'partsType', title: '规格类型', width: 120 },
                        { field: 'partsUnit', title: '单位', width: 80 },
                        { field: 'partsBrand', title: '品牌', width: 80 },
                        { field: 'partsNum', title: '配件数量', width: 80 },
                        { field: 'partsLoss', title: '损耗率', width: 80 },
                        { field: 'inventory', title: '当前库存', width: 80 },
                        { field: 'availableProduce', title: '可供生产', width: 100 },
                        {
                            title: '操作', width: 120, templet: function (d) {
                                return '<button class="layui-btn layui-btn-xs" onclick="createSubBom(' + d.partsId + ')">创建子Bom</button>';
                            }
                        }
                    ]
                ],
                done: function () {
                    // 为操作按钮绑定点击事件
                    window.createSubBom = function (partsId) {
                        //layer.msg('您点击了创建子Bom按钮，当前列Id：' + partsId);
                        localStorage.setItem('PartsId', partsId);
                        //alert(partsId)
                        window.location.href = `/WorkOrder/AddChildBom`;
                    };
                },
                parseData: function (res) {
                    return {
                        "code": res.code || 0,
                        "msg": res.msg || '',
                        "count": res.count || 0,
                        "data": res.data || []
                    };
                }
            });

            // 渲染工艺流程表格
            table.render({
                elem: '#processTable',
                //url: 'http://localhost:5234/api/WorkOrder/GetProcess',
                url: "@ViewBag.BaseUrl/T7/WorkOrder/GetProcess",
                method: 'get',
                cols: [
                    [
                        { type: 'numbers', title: '序号', width: 80 },
                        { field: 'processCode', title: '工序编码', width: 120 },
                        { field: 'stepName', title: '工序名称', width: 120 },
                        { field: 'orderCode', title: '加工序号', width: 80 },
                        { field: 'processName', title: '工艺流程', width: 120 },
                        { field: 'resName', title: '负责人', width: 120 },
                        { field: 'depName', title: '部门', width: 120 },
                        { field: 'num', title: '单位工作量', width: 80 },
                        {
                            title: '操作', width: 120, templet: function (d) {
                                return '<button class="layui-btn layui-btn-xs" onclick="editProcess(' + d.processId + ')">修改</button>';
                            }
                        }
                    ]
                ],
                done: function () {
                    // 为操作按钮绑定点击事件
                    window.editProcess = function (processId) {
                        // 发送Ajax请求获取数据
                        $.ajax({
                            //url: 'http://localhost:5234/api/WorkOrder/ReGetProcessInfoById',
                            url: "@ViewBag.BaseUrl/T7/WorkOrder/ReGetProcessInfoById",
                            type: 'GET',
                            data: { ProcessId: processId },
                            dataType: 'json',
                            success: function (res) {
                                if (res && res.data) {
                                    var data = res.data;
                                    // 弹出弹框并反填数据
                                    var formHtml = `
                                                <form class="layui-form">
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">工序编码</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="processCode" value="${data.processCode}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">工序名称</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="stepName" value="${data.stepName}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">加工序号</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="orderCode" value="${data.orderCode}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">工艺流程</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="processName" value="${data.processName}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">负责人</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="resName" value="${data.resName}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">部门</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="depName" value="${data.depName}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">单位工作量</label>
                                                        <div class="layui-input-block">
                                                            <input type="text" name="num" value="${data.num}">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <div class="layui-input-block">
                                                            <button class="layui-btn" type="submit">保存修改</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            `;
                                    layer.open({
                                        type: 1,
                                        title: '修改工艺流程',
                                        content: formHtml,
                                        area: ['500px', 'auto'],
                                        success: function (layero, index) {
                                            form.render();
                                            // 为保存按钮绑定提交事件
                                            $('.layui-form').on('submit', function (e) {
                                                e.preventDefault();
                                                var formData = $(this).serializeArray();
                                                var jsonData = {};
                                                formData.forEach(function (field) {
                                                    jsonData[field.name] = field.value;
                                                });
                                                // 手动添加ProcessId字段
                                                jsonData['ProcessId'] = processId;
                                                // 发送修改数据的Ajax请求
                                                $.ajax({
                                                    //url: 'http://localhost:5090/api/WrokOrder/UpdateProocessInfo',
                                                    url: "@ViewBag.BaseUrl/T8/WrokOrder/UpdateProocessInfo",
                                                    type: 'POST', // 改为POST请求
                                                    contentType: 'application/json',
                                                    data: JSON.stringify(jsonData),
                                                    dataType: 'json',
                                                    success: function (res) {
                                                        if (res && res.code === 206) {
                                                            layer.msg('修改成功', { icon: 1 });
                                                            layer.close(index);
                                                            table.reload('processTable');
                                                        } else {
                                                            layer.msg('修改失败', { icon: 2 });
                                                        }
                                                    },
                                                    error: function (xhr, status, error) {
                                                        layer.msg('请求失败:' + error, { icon: 2 });
                                                        console.error('AJAX error:', xhr.status, xhr.statusText, xhr.responseText);
                                                    }
                                                });
                                            });
                                        }
                                    });
                                } else {
                                    layer.msg('后端返回的数据为空或格式不正确', { icon: 2 });
                                }
                            },
                            error: function (xhr, status, error) {
                                layer.msg('请求失败:' + error, { icon: 2 });
                                console.error('AJAX error:', xhr.status, xhr.statusText, xhr.responseText);
                            }
                        });
                    };
                },
                parseData: function (res) {
                    return {
                        "code": res.code || 0,
                        "msg": res.msg || '',
                        "count": res.count || 0,
                        "data": res.data || []
                    };
                }
            });

            // 从localStorage中获取BomCode
            var bomCode = localStorage.getItem('BomCode');
            if (bomCode) {
                // 发送AJAX请求
                $.ajax({
                    //url: 'http://localhost:5234/api/WorkOrder/GetOneBom',
                    url: "@ViewBag.BaseUrl/T7/WorkOrder/GetOneBom",
                    type: 'GET',
                    data: { BomCode: bomCode },
                    dataType: 'json',
                    success: function (res) {
                        if (res && res.data) {
                            var data = res.data;
                            // 反填数据到表单字段
                            $('#bomCode').val(data[0].bomCode);
                            $('#bomTheme').val(data[0].bomTheme);
                            $('#documentCode').val(data[0].defaultBom === '是' ? '是' : '否');
                            $('#bomVersion').val(data[0].bomVersion);
                            $('#productType').val(data[0].productType);
                            $('#productName').val(data[0].productName);
                            $('#ProductionNum').val(data[0].productionNum);
                            $('#remark').val(data[0].remarks);
                            form.render();
                        } else {
                            layer.msg('后端返回的数据为空或格式不正确', { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.msg('请求失败:' + error, { icon: 2 });
                        console.error('AJAX error:', xhr.status, xhr.statusText, xhr.responseText);
                    }
                });
            } else {
                console.log('BomCode未在localStorage中找到');
            }
            // 渲染操作记录表格
            table.render({
                elem: '#operationTable',
                //url: 'http://localhost:5234/api/WorkOrder/GetOperationRecord',
                url: "@ViewBag.BaseUrl/T7/WorkOrder/GetOperationRecord",

                method: 'get',
                cols: [
                    [
                        { type: 'numbers', title: '序号', width: 80 },
                        { field: 'operationName', title: '操作人', width: 220 },
                        { field: 'operationDate', title: '操作时间', width: 220 },
                        { field: 'operationInfo', title: '操作内容', width: 220 },
                    ]
                ],
                done: function () {
                    // 可以在这里为操作记录表的操作按钮等添加点击事件等逻辑
                },
                parseData: function (res) {
                    return {
                        "code": res.code || 0,
                        "msg": res.msg || '',
                        "count": res.count || 0,
                        "data": res.data || []
                    };
                }
            });
        });
    </script>
</body>

</html>